<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#000" size="50"></u-icon>
			<text>设备信息</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<view class="upload-join" @click="uploadIcon">
				<image :src="defaultUrl" mode="" style='border-radius: 50%;'></image>
				<view class="upload">
					<u-icon name="camera-fill" size="40" color="#fff"></u-icon>
				</view>
			</view>
			<view class="admin-join">
				<text>宝宝名字</text>
				<input :disabled="isBindDevice" type="text" value="" placeholder="请输入宝宝名字"
					style='text-align:right;width:230rpx' require v-model="name" />
			</view>
			<view class="admin-join">
				<text>性别</text>
				<picker :disabled="isBindDevice"
					style="display: inline-block;color: #909399;font-size: 32rpx;float: right;"
					@change="bindPickerChange1" :value="index1" :range="array1" range-key="name">

					<view style="">{{ array1[index1].name }}
						<u-icon name="arrow-down" size="40" color="#666"></u-icon>
					</view>
				</picker>

			</view>
			<view class="admin-join">
				<text>出生日期</text>
				<u-icon @click="calendarSelect" style="float: right;color: #909399;" name="calendar" size="45"
					color="#909399"></u-icon>
				<text style="float: right;color: #909399;font-size: 32rpx;" @click="calendarSelect">{{datatime}}</text>
			</view>
			<view class="admin-join">
				<text>身 高</text>
				<input :disabled="isBindDevice" type="number" v-model="height" style='text-align:right'
					placeholder="请输入身高" />
				<text style="position: absolute;bottom: 20%; color: #909399;font-size: 32rpx;">cm</text>
			</view>
			<view class="admin-join">
				<text>体 重</text>
				<input :disabled="isBindDevice" type="number" v-model="weight" style="text-align:right"
					placeholder="请输入体重" />
				<text style="position: absolute;bottom: 20%; color: #909399;font-size: 32rpx;text-align:right">kg</text>
			</view>
			<!-- 	<view class="admin-join">
				<text>名 称</text>
				<input type="text" v-model="name2" placeholder="(必填)" />
			</view> -->
			<view class="admin-join">
				<text>请选择关系身份</text>
				<picker style="display: inline-block;color: #909399;font-size: 32rpx;float: right;"
					@change="bindPickerChange" :value="index" :range="array" range-key="name">

					<view style="">{{ array[index].name }}
						<u-icon name="arrow-down" size="40" color="#666"></u-icon>
					</view>
				</picker>

			</view>
			<view class="binding" @click="jump">
				确定
			</view>
		</view>
		<!-- 组件 -->
		<u-calendar v-model="calendarOptions.show" mode="date" @change="change"></u-calendar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBindDevice: false,
				defaultUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
				calendarOptions: {
					show: false,
					mode: 'date'
				},
				code: '',
				name: '',
				name2: '',
				height: '',
				weight: '',
				datatime: '2018-07-08',
				sex: 0,
				index1: 0,
				array1: [{
					name: '男'
				}, {
					name: '女'
				}],
				array: [{
					name: '爸爸'
				}, {
					name: '妈妈'
				}, {
					name: '爷爷'
				}, {
					name: '奶奶'
				}, {
					name: '外公'
				}, {
					name: '外婆'
				}, {
					name: '其他'
				}],
				index: 2,
				icon: '',
				myPhone: ''
			}
		},
		onLoad(query) {
			this.myPhone = uni.getStorageSync('zwxphone')
			if (query.code) {
				this.code = query.code;
				
				this.searchCodeBinding(this.code)
			}
		},
		methods: {
			calendarSelect() {
				if (!this.isBindDevice) {
					this.calendarOptions.show = true
				}
			},
			searchCodeBinding(code) {
				this.$api.searchDeviceBinding({
					deviceCode: code
				}).then(res => {
					if (res.code === 200) {
						let data = res.result.personList
						if (data.length) {
							const find = data.some(ele => {
								return ele.phone = this.myPhone
							})
							if (find) {
								this.isBindDevice = true
								// this.code = data[0].deviceCode
								this.name = data[0].name
								this.datatime = data[0].birthday
								this.weight = data[0].weight
								this.height = data[0].height
								this.index1 = data[0].sex
								this.index = data[0].relation
							} else {
								uni.showToast({
									title: '已经绑过！',
									duration: 1000,
									success: () => {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1000)

									}

								})

							}
						}
					}
				})
			},
			// 返回
			navigateBack() {
				// uni.navigateTo({
				// 	url: '../invitation'
				// })
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prevPage = pages[pages.length - 2]

				uni.navigateBack({
					delta: prevPage
				})
			},
			change(e) {
				console.log(e);
				this.datatime = e.result
			},
			confirm(e) {
				console.log(e);
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			bindPickerChange1: function(e) {
				this.index1 = e.detail.value;
			},
			async jump() {
				// uni.reLaunch({
				// 	url:'../../../index/index'
				// })

				if (this.name === '') {
					uni.showModal({
						icon: 'none',
						title: '设备绑定',
						content: '请输入宝宝名字！'
					})
					return
				}
				let tpl_param = {
					code: this.code,
					name: this.name,
					name2: this.name2,
					sex: this.index1,
					height: this.height,
					weight: this.weight,
					datatime: this.datatime,
					index: this.index,
					// icon: this.icon
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.bindDevice(tpl_param);
				console.log(res, 889)
				if (res.code == 200) {
					uni.showModal({
						title: '设备绑定',
						content: '设备绑定成功'
					});
					// const code = uni.getStorageSync('code');
					// if(code){
					// 	uni.clearStorageSync('code')
					// 	console.log(code,222)
					// }
				
				  uni.reLaunch({
				  	url:'../../../index/index'
				  })
				
				}
				else if (res.code === 500) {
					uni.reLaunch({
						url: '../../../index/index'
					})
					// uni.showModal({
					// 	title: '设备绑定',
					// 	content: '设备绑定成功'
					// });

					// uni.switchTab({
					// 	url: '/pages/index/index'
					// })
					// uni.showModal({
					// 	title: '设备绑定',
					// 	content: res.message || '失败',
					// });


				} else if (res.code === 201) {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}


				// 	uni.hideLoading();

			},
			uploadIcon() {
				this.chooseImage();
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			async chooseImage() {
				/* if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				} */
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['compressed'],
					count: 1,
					success: (res) => {
						console.log(res);
						if (res.tempFilePaths && res.tempFilePaths.length) {
							if (res.tempFiles[0].size > this.maxImgSize) {
								uni.showToast({
									icon: 'error',
									title: '图片太大'
								});
							} else {
								let tempFilePaths = res.tempFilePaths;
								let tempFiles = res.tempFiles;
								if (tempFilePaths && tempFilePaths.length) {
									uni.showLoading({
										title: '加载中',
										mask: true
									});
									for (let i = 0, len = tempFilePaths.length; i < len; i++) {
										this.uploadImg(tempFilePaths[i], tempFiles[i]);
									}
								}
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: '图片获取失败'
							});
						}
					},
					fail: (err) => {
						console.log("err: ", err);
						// #ifdef MP
						if (err.errMsg.indexOf('cancel') !== '-1') {
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'] && res
									.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										icon: 'none',
										title: '授权失败',
										content: '程序需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			async uploadImg(path, file) {
				 
				// this.$api.uploadFile(file)
				// uni.uploadFile({
				// 	url: `https://cc.zhilengnuan.cn/znl-boot/sys/common/upload`, //仅为示例，非真实的接口地址
				// 	filePath: path,
				// 	file: file,
				// 	name: 'file',
				// 	header: {
				// 		'X-Access-Token': this.wxuserInfo.token
				// 	},
				// 	formData: {
				// 		biz: 'temp' // 上传附带参数
				// 	},
				// 	success: (uploadFileRes) => {
				// 		// this.imageList.push(path)
				// 		let res = uploadFileRes.data;
				// 		if (res) {
				// 			res = JSON.parse(res);
				// 		}
				// 		if (res.code == 0) {
				// 			// 图片地址返回
				// 			this.icon = res.data;
				// 		}
				// 		uni.hideLoading();
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 		uni.showToast({
				// 			icon: 'error',
				// 			title: '图片上传失败'
				// 		});
				// 		uni.hideLoading();
				// 	}
				// });
			},
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #000;
		background-color: #fff;
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 200rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin-left: 240rpx;
	}

	.upload-join {
		position: relative;
	}

	.upload {
		background-color: rgb(68, 92, 223);
		padding: 10rpx;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 54%;
		top: 65%;
	}

	.admin-join {
		border-bottom: rgb(238, 238, 238) solid 1rpx;
		font-size: 36rpx;
		padding: 30rpx;
		padding-top: 50rpx;
		position: relative;
		font-weight: bold;
	}

	.binding {
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
		border-radius: 50rpx;
		text-align: center;
		margin-bottom: 35rpx;
		padding: 20rpx;
		font-size: 36rpx;
		background-color: rgb(68, 92, 223);
		color: #fff;
		margin-top: 100rpx;
	}

	input {
		font-size: 32rpx;
		display: inline-block;
		float: right;
		width: 210rpx;
		color: #909399;
	}
</style>
